<template>
  <div class="menu-box">
    <div
      class="menu"
      v-for="(item, index) in 8"
      :key="item"
      @click="menuClick(index)"
      :class="currIndex === index ? 'active' : ''"
    >
      123
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const currIndex = ref<number>(-1);
  const menuClick = (index: number) => {
    currIndex.value = index;
  };
</script>

<style lang="less" scoped>
  .menu-box {
    width: 240px;
    background-color: #ffffff;
    border-radius: 5px;
    .menu {
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      height: 45px;
      width: 100%;
      padding-left: 30px;
      line-height: 45px;
    }
    .menu:hover {
      color: #2cc7c8;
    }
  }

  .active {
    background: url(https://szgk.sz-water.com.cn/resource/wt_resource/svg/usercenter_item_active.svg) no-repeat 50%;
  }
</style>
